<template>
  <div class="letter-list">
    <div class="letter-title">
      <span>字母排序</span>
    </div>
    <div class="letter-list">
      <ul>
        <li v-for="item in letterList"
            :key="item.id">
          {{item.cityName}}
        </li>
        <li class="empty"></li>
        <li class="empty"></li>
        <li class="empty"></li>
        <li class="empty"></li>
        <li class="empty"></li>
        <li class="empty"></li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  props:["letterList"]
}
</script>
<style scoped>
.letter-title {
  height: 0.8rem;
  line-height: 0.8rem;
  padding-left: 0.2rem;
  font-size: 0.32rem;
}
ul {
  display: flex;
  width: 100%;
  height: 4.5rem;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  background: #fff;
}
li {
  display: block;
  box-sizing: border-box;
  width: 16%;
  line-height: 0.97rem;
  font-size: 0.32rem;
  font-weight: bold;
  background: #fff;
  flex-shrink: 0;
  text-align: center;
}
.empty {
  height: 0;
  border: none;
  margin-top: 0;
  margin-bottom: 0;
  visibility: hidden;
  border: 0px;
}
</style>